<template>
  <div class="todo-board-container">
    <el-card shadow="never" class="header-card">
      <div class="page-header">
        <div class="header-content">
          <el-icon class="header-icon" :size="28"><Grid /></el-icon>
          <div class="header-text">
            <h2>待办看板</h2>
            <p>可视化管理你的待办事项</p>
          </div>
        </div>
        <div class="header-actions">
          <el-button-group>
            <el-button :type="viewMode === 'board' ? 'primary' : ''" @click="viewMode = 'board'">
              <el-icon><Grid /></el-icon>
              看板视图
            </el-button>
            <el-button :type="viewMode === 'list' ? 'primary' : ''" @click="$router.push('/office/todos')">
              <el-icon><List /></el-icon>
              列表视图
            </el-button>
          </el-button-group>
          <el-button type="primary" @click="handleNewTodo">
            <el-icon><Plus /></el-icon>
            新建待办
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 统计卡片 -->
    <div class="stats-row">
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#909399"><Document /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ backlogItems.length }}</div>
            <div class="stat-label">待处理</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#E6A23C"><Clock /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ inProgressItems.length }}</div>
            <div class="stat-label">进行中</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#409EFF"><View /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ reviewItems.length }}</div>
            <div class="stat-label">待审核</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#67C23A"><CircleCheck /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ completedItems.length }}</div>
            <div class="stat-label">已完成</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 看板区域 -->
    <div class="board-wrapper">
      <!-- 待处理列 -->
      <div class="board-column">
        <div class="column-header" style="background: #f4f4f5;">
          <div class="column-title">
            <el-icon><Document /></el-icon>
            <span>待处理</span>
            <el-badge :value="backlogItems.length" class="column-badge" />
          </div>
          <el-button link @click="addItemToColumn('backlog')">
            <el-icon><Plus /></el-icon>
          </el-button>
        </div>
        <div 
          class="column-content"
          @drop="handleDrop($event, 'backlog')"
          @dragover.prevent
          @dragenter.prevent
        >
          <transition-group name="card">
            <div
              v-for="item in backlogItems"
              :key="item.id"
              class="board-card"
              draggable="true"
              @dragstart="handleDragStart($event, item)"
              @dragend="handleDragEnd"
            >
              <div class="card-header">
                <div class="card-title">{{ item.title }}</div>
                <el-dropdown @command="handleCardAction($event, item)">
                  <el-button link size="small">
                    <el-icon><More /></el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="edit">编辑</el-dropdown-item>
                      <el-dropdown-item command="delete">删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
              <div v-if="item.description" class="card-description">
                {{ item.description }}
              </div>
              <div class="card-tags">
                <el-tag v-if="item.priority !== 'normal'" :type="getPriorityType(item.priority)" size="small">
                  {{ getPriorityName(item.priority) }}
                </el-tag>
                <el-tag v-if="item.categoryName" :color="item.categoryColor" size="small" effect="plain">
                  {{ item.categoryName }}
                </el-tag>
              </div>
              <div class="card-footer">
                <div class="card-meta">
                  <el-icon v-if="item.important" color="#F7BA2A"><StarFilled /></el-icon>
                  <span v-if="item.dueDate" class="due-date" :class="{ 'overdue': isOverdue(item) }">
                    <el-icon><Clock /></el-icon>
                    {{ formatDueDate(item.dueDate) }}
                  </span>
                </div>
              </div>
            </div>
          </transition-group>
          <el-empty v-if="backlogItems.length === 0" description="暂无待办" :image-size="80" />
        </div>
      </div>

      <!-- 进行中列 -->
      <div class="board-column">
        <div class="column-header" style="background: #fef0e6;">
          <div class="column-title">
            <el-icon><Clock /></el-icon>
            <span>进行中</span>
            <el-badge :value="inProgressItems.length" class="column-badge" />
          </div>
          <el-button link @click="addItemToColumn('inProgress')">
            <el-icon><Plus /></el-icon>
          </el-button>
        </div>
        <div 
          class="column-content"
          @drop="handleDrop($event, 'inProgress')"
          @dragover.prevent
          @dragenter.prevent
        >
          <transition-group name="card">
            <div
              v-for="item in inProgressItems"
              :key="item.id"
              class="board-card in-progress"
              draggable="true"
              @dragstart="handleDragStart($event, item)"
              @dragend="handleDragEnd"
            >
              <div class="card-header">
                <div class="card-title">{{ item.title }}</div>
                <el-dropdown @command="handleCardAction($event, item)">
                  <el-button link size="small">
                    <el-icon><More /></el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="edit">编辑</el-dropdown-item>
                      <el-dropdown-item command="delete">删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
              <div v-if="item.description" class="card-description">
                {{ item.description }}
              </div>
              <div class="card-tags">
                <el-tag v-if="item.priority !== 'normal'" :type="getPriorityType(item.priority)" size="small">
                  {{ getPriorityName(item.priority) }}
                </el-tag>
                <el-tag v-if="item.categoryName" :color="item.categoryColor" size="small" effect="plain">
                  {{ item.categoryName }}
                </el-tag>
              </div>
              <div class="card-footer">
                <div class="card-meta">
                  <el-icon v-if="item.important" color="#F7BA2A"><StarFilled /></el-icon>
                  <span v-if="item.dueDate" class="due-date" :class="{ 'overdue': isOverdue(item) }">
                    <el-icon><Clock /></el-icon>
                    {{ formatDueDate(item.dueDate) }}
                  </span>
                </div>
                <el-progress 
                  v-if="item.progress !== undefined"
                  :percentage="item.progress"
                  :stroke-width="6"
                  :show-text="false"
                />
              </div>
            </div>
          </transition-group>
          <el-empty v-if="inProgressItems.length === 0" description="暂无进行中" :image-size="80" />
        </div>
      </div>

      <!-- 待审核列 -->
      <div class="board-column">
        <div class="column-header" style="background: #e6f7ff;">
          <div class="column-title">
            <el-icon><View /></el-icon>
            <span>待审核</span>
            <el-badge :value="reviewItems.length" class="column-badge" />
          </div>
          <el-button link @click="addItemToColumn('review')">
            <el-icon><Plus /></el-icon>
          </el-button>
        </div>
        <div 
          class="column-content"
          @drop="handleDrop($event, 'review')"
          @dragover.prevent
          @dragenter.prevent
        >
          <transition-group name="card">
            <div
              v-for="item in reviewItems"
              :key="item.id"
              class="board-card review"
              draggable="true"
              @dragstart="handleDragStart($event, item)"
              @dragend="handleDragEnd"
            >
              <div class="card-header">
                <div class="card-title">{{ item.title }}</div>
                <el-dropdown @command="handleCardAction($event, item)">
                  <el-button link size="small">
                    <el-icon><More /></el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="edit">编辑</el-dropdown-item>
                      <el-dropdown-item command="delete">删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
              <div v-if="item.description" class="card-description">
                {{ item.description }}
              </div>
              <div class="card-tags">
                <el-tag v-if="item.priority !== 'normal'" :type="getPriorityType(item.priority)" size="small">
                  {{ getPriorityName(item.priority) }}
                </el-tag>
                <el-tag v-if="item.categoryName" :color="item.categoryColor" size="small" effect="plain">
                  {{ item.categoryName }}
                </el-tag>
              </div>
              <div class="card-footer">
                <div class="card-meta">
                  <el-icon v-if="item.important" color="#F7BA2A"><StarFilled /></el-icon>
                  <span v-if="item.dueDate" class="due-date" :class="{ 'overdue': isOverdue(item) }">
                    <el-icon><Clock /></el-icon>
                    {{ formatDueDate(item.dueDate) }}
                  </span>
                </div>
              </div>
            </div>
          </transition-group>
          <el-empty v-if="reviewItems.length === 0" description="暂无待审核" :image-size="80" />
        </div>
      </div>

      <!-- 已完成列 -->
      <div class="board-column">
        <div class="column-header" style="background: #f0f9ff;">
          <div class="column-title">
            <el-icon><CircleCheck /></el-icon>
            <span>已完成</span>
            <el-badge :value="completedItems.length" class="column-badge" />
          </div>
          <el-button link @click="handleClearCompleted" v-if="completedItems.length > 0">
            <el-icon><Delete /></el-icon>
          </el-button>
        </div>
        <div 
          class="column-content"
          @drop="handleDrop($event, 'completed')"
          @dragover.prevent
          @dragenter.prevent
        >
          <transition-group name="card">
            <div
              v-for="item in completedItems"
              :key="item.id"
              class="board-card completed"
              draggable="true"
              @dragstart="handleDragStart($event, item)"
              @dragend="handleDragEnd"
            >
              <div class="card-header">
                <div class="card-title">{{ item.title }}</div>
                <el-dropdown @command="handleCardAction($event, item)">
                  <el-button link size="small">
                    <el-icon><More /></el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="edit">编辑</el-dropdown-item>
                      <el-dropdown-item command="delete">删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
              <div v-if="item.description" class="card-description">
                {{ item.description }}
              </div>
              <div class="card-tags">
                <el-tag v-if="item.priority !== 'normal'" :type="getPriorityType(item.priority)" size="small">
                  {{ getPriorityName(item.priority) }}
                </el-tag>
                <el-tag v-if="item.categoryName" :color="item.categoryColor" size="small" effect="plain">
                  {{ item.categoryName }}
                </el-tag>
              </div>
              <div class="card-footer">
                <div class="card-meta">
                  <el-icon v-if="item.important" color="#F7BA2A"><StarFilled /></el-icon>
                  <span v-if="item.completedDate" class="completed-date">
                    <el-icon><CircleCheck /></el-icon>
                    {{ formatCompletedDate(item.completedDate) }}
                  </span>
                </div>
              </div>
            </div>
          </transition-group>
          <el-empty v-if="completedItems.length === 0" description="暂无已完成" :image-size="80" />
        </div>
      </div>
    </div>

    <!-- 新建/编辑待办对话框 -->
    <TodoEditDialog
      v-model="showAddDialog"
      :todo="currentItem"
      :categories="categories"
      @save="handleSaveTodo"
      @cancel="handleCancelEdit"
    />
    
    <!-- 状态选择对话框（仅在新建时显示） -->
    <el-dialog
      v-model="showStatusDialog"
      title="选择状态"
      width="400px"
      destroy-on-close
      @close="handleCancelStatus"
    >
      <el-form :model="statusForm" ref="statusFormRef" label-width="100px">
        <el-form-item label="状态" prop="status">
          <el-select v-model="statusForm.status" placeholder="选择状态" style="width: 100%">
            <el-option label="待处理" value="backlog" />
            <el-option label="进行中" value="inProgress" />
            <el-option label="待审核" value="review" />
            <el-option label="已完成" value="completed" />
          </el-select>
        </el-form-item>
        <el-form-item label="进度" prop="progress" v-if="statusForm.status === 'inProgress'">
          <el-slider v-model="statusForm.progress" :show-tooltip="true" :marks="{ 0: '0%', 50: '50%', 100: '100%' }" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="handleCancelStatus">取消</el-button>
        <el-button type="primary" @click="handleConfirmStatus">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Grid, List, Plus, Document, Clock, View, CircleCheck, More, Delete,
  Edit, StarFilled, Star
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { keyUser, valueUser } from '@/api/data'
import TodoEditDialog from './components/TodoEditDialog.vue'

const router = useRouter()

// 状态
const viewMode = ref('board')
const showAddDialog = ref(false)
const showStatusDialog = ref(false)
const currentItem = ref(null)
const draggedItem = ref(null)
const pendingTodoData = ref(null) // 保存待处理的待办数据

// 状态表单（用于选择看板状态）
const statusForm = reactive({
  status: 'backlog',
  progress: 0
})
const statusFormRef = ref(null)

// 分类数据
const categories = ref([
  { id: 1, name: '工作', color: '#409EFF' },
  { id: 2, name: '生活', color: '#67C23A' },
  { id: 3, name: '学习', color: '#E6A23C' }
])

// 待办数据
const boardItems = ref([])

// 加载看板数据
const loadBoardItems = async () => {
  try {
    // 从列表模式的 todos 数据读取
    const response = await keyUser('todos')
    if (response && response.data) {
      const data = typeof response.data === 'string' ? JSON.parse(response.data) : response.data
      const todos = data.todos || []
      categories.value = data.categories || categories.value
      
      // 将列表模式的 todos 转换为看板模式的 boardItems
      boardItems.value = todos.map(todo => {
        // 如果已有 status 字段，直接使用
        if (todo.status) {
          return todo
        }
        // 如果没有 status，根据 completed 字段推断
        const status = todo.completed ? 'completed' : (todo.status || 'backlog')
        return {
          ...todo,
          status: status,
          // 确保有必要的字段
          progress: todo.progress || (status === 'inProgress' ? 0 : undefined)
        }
      })
    }
  } catch (error) {
    console.error('加载看板数据失败:', error)
    ElMessage.error('加载看板数据失败')
  }
}

// 保存看板数据
const saveBoardItems = async () => {
  try {
    // 将看板模式的 boardItems 转换为列表模式的 todos 格式
    const todos = boardItems.value.map(item => {
      const todo = { ...item }
      // 根据 status 更新 completed 字段
      todo.completed = todo.status === 'completed'
      return todo
    })
    
    const dataToSave = {
      todos: todos,
      categories: categories.value
    }
    // 保存到列表模式使用的同一个 key
    await valueUser('todos', JSON.stringify(dataToSave))
  } catch (error) {
    console.error('保存看板数据失败:', error)
    ElMessage.error('保存看板数据失败')
  }
}


// 计算属性 - 按状态分组
const backlogItems = computed(() => 
  boardItems.value.filter(item => item.status === 'backlog')
)

const inProgressItems = computed(() => 
  boardItems.value.filter(item => item.status === 'inProgress')
)

const reviewItems = computed(() => 
  boardItems.value.filter(item => item.status === 'review')
)

const completedItems = computed(() => 
  boardItems.value.filter(item => item.status === 'completed')
)

// 拖拽处理
const handleDragStart = (event, item) => {
  draggedItem.value = item
  event.target.style.opacity = '0.5'
}

const handleDragEnd = (event) => {
  event.target.style.opacity = '1'
}

const handleDrop = (event, newStatus) => {
  if (!draggedItem.value) return
  
  const oldStatus = draggedItem.value.status
  if (oldStatus === newStatus) return
  
  // 更新状态
  draggedItem.value.status = newStatus
  
  // 如果移到已完成列，添加完成时间
  if (newStatus === 'completed' && !draggedItem.value.completedDate) {
    draggedItem.value.completedDate = new Date().toLocaleString()
  }
  
  // 如果从已完成移出，清除完成时间
  if (oldStatus === 'completed' && newStatus !== 'completed') {
    draggedItem.value.completedDate = null
  }
  
  // 如果移到进行中，初始化进度
  if (newStatus === 'inProgress' && draggedItem.value.progress === undefined) {
    draggedItem.value.progress = 0
  }
  
  saveBoardItems()
  ElMessage.success(`已移动到${getStatusName(newStatus)}`)
  draggedItem.value = null
}

// 卡片操作
const handleCardAction = (command, item) => {
  if (command === 'edit') {
    handleEditItem(item)
  } else if (command === 'delete') {
    handleDeleteItem(item)
  }
}

const handleEditItem = (item) => {
  currentItem.value = item
  showAddDialog.value = true
}

const handleDeleteItem = (item) => {
  ElMessageBox.confirm('确定要删除这个待办事项吗？', '提示', {
    type: 'warning'
  }).then(() => {
    const index = boardItems.value.findIndex(i => i.id === item.id)
    if (index > -1) {
      boardItems.value.splice(index, 1)
      saveBoardItems()
      ElMessage.success('删除成功')
    }
  }).catch(() => {})
}

// 处理保存待办（来自 TodoEditDialog）
const handleSaveTodo = (formData) => {
  pendingTodoData.value = formData
  
  // 如果是编辑已有项目，直接保存（保持原状态）
  if (currentItem.value) {
    statusForm.status = currentItem.value.status || 'backlog'
    statusForm.progress = currentItem.value.progress || 0
    // 编辑时直接保存，不需要弹出状态对话框
    handleConfirmStatus()
    return
  }
  
  // 新建时，检查是否已预设状态（从列头添加时）
  if (statusForm.status && statusForm.status !== 'backlog') {
    // 已有预设状态，直接保存
    handleConfirmStatus()
    return
  }
  
  // 新建且没有预设状态时，需要选择状态
  statusForm.status = 'backlog'
  statusForm.progress = 0
  showStatusDialog.value = true
}

// 确认状态选择
const handleConfirmStatus = async () => {
  const formData = pendingTodoData.value
  if (!formData) {
    ElMessage.warning('数据异常，请重新操作')
    return
  }
  
  try {
    if (currentItem.value) {
      // 更新
      Object.assign(currentItem.value, {
        ...formData,
        status: statusForm.status,
        progress: statusForm.status === 'inProgress' ? (statusForm.progress || 0) : undefined
      })
      
      // 更新分类信息
      if (formData.categoryId) {
        const cat = categories.value.find(c => c.id === formData.categoryId)
        if (cat) {
          currentItem.value.categoryName = cat.name
          currentItem.value.categoryColor = cat.color
        }
      } else {
        currentItem.value.categoryName = ''
        currentItem.value.categoryColor = ''
      }
      
      // 如果移到已完成列，添加完成时间
      if (statusForm.status === 'completed' && !currentItem.value.completedDate) {
        currentItem.value.completedDate = new Date().toLocaleString()
      }
      
      // 如果从已完成移出，清除完成时间
      const oldStatus = currentItem.value.status
      if (oldStatus === 'completed' && statusForm.status !== 'completed') {
        currentItem.value.completedDate = null
      }
      
      // 保存数据
      await saveBoardItems()
      ElMessage.success('更新成功')
    } else {
      // 新建
      const newItem = {
        id: Date.now(),
        ...formData,
        status: statusForm.status,
        progress: statusForm.status === 'inProgress' ? (statusForm.progress || 0) : undefined,
        completed: statusForm.status === 'completed',
        dueDate: formData.dueDate,
        createTime: new Date().toLocaleString()
      }
      
      // 如果状态是已完成，添加完成时间
      if (statusForm.status === 'completed') {
        newItem.completedDate = new Date().toLocaleString()
      }
      
      // 添加分类信息
      if (formData.categoryId) {
        const cat = categories.value.find(c => c.id === formData.categoryId)
        if (cat) {
          newItem.categoryName = cat.name
          newItem.categoryColor = cat.color
        }
      }
      
      boardItems.value.push(newItem)
      // 保存数据
      await saveBoardItems()
      ElMessage.success('添加成功')
    }
    
    showAddDialog.value = false
    showStatusDialog.value = false
    currentItem.value = null
    pendingTodoData.value = null
  } catch (error) {
    console.error('保存待办失败:', error)
    ElMessage.error('保存失败，请重试')
  }
}

// 处理取消编辑
const handleCancelEdit = () => {
  currentItem.value = null
  pendingTodoData.value = null
  showStatusDialog.value = false
}

// 处理取消状态选择
const handleCancelStatus = () => {
  showStatusDialog.value = false
  pendingTodoData.value = null
  // 如果是从编辑触发的，保留编辑对话框打开
  // 如果是从新建触发的，关闭编辑对话框
  if (!currentItem.value) {
    showAddDialog.value = false
  }
}

// 处理新建待办
const handleNewTodo = () => {
  currentItem.value = null
  statusForm.status = 'backlog'
  statusForm.progress = 0
  showAddDialog.value = true
}

const addItemToColumn = (status) => {
  currentItem.value = null
  statusForm.status = status
  statusForm.progress = status === 'inProgress' ? 0 : undefined
  showAddDialog.value = true
}

const handleClearCompleted = () => {
  ElMessageBox.confirm('确定要清除所有已完成的待办吗？', '提示', {
    type: 'warning'
  }).then(() => {
    boardItems.value = boardItems.value.filter(item => item.status !== 'completed')
    saveBoardItems()
    ElMessage.success('清除成功')
  }).catch(() => {})
}


// 工具函数
const getStatusName = (status) => {
  const map = { 
    backlog: '待处理', 
    inProgress: '进行中', 
    review: '待审核', 
    completed: '已完成' 
  }
  return map[status] || status
}

const getPriorityName = (priority) => {
  const map = { low: '低', normal: '普通', high: '高', urgent: '紧急' }
  return map[priority] || priority
}

const getPriorityType = (priority) => {
  const map = { low: 'info', normal: '', high: 'warning', urgent: 'danger' }
  return map[priority] || ''
}

const isOverdue = (item) => {
  if (!item.dueDate || item.status === 'completed') return false
  return new Date(item.dueDate) < new Date()
}

const formatDueDate = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  const today = new Date()
  const tomorrow = new Date(today)
  tomorrow.setDate(tomorrow.getDate() + 1)
  
  const dateOnly = date.toISOString().split('T')[0]
  const todayOnly = today.toISOString().split('T')[0]
  const tomorrowOnly = tomorrow.toISOString().split('T')[0]
  
  if (dateOnly === todayOnly) {
    return '今天 ' + date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  } else if (dateOnly === tomorrowOnly) {
    return '明天 ' + date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  }
  return date.toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
}

const formatCompletedDate = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
}

// 页面挂载时加载数据
onMounted(() => {
  loadBoardItems()
})
</script>

<style scoped>
.todo-board-container {
  padding: 20px;
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}

.header-card {
  margin-bottom: 20px;
  flex-shrink: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  color: #409EFF;
}

.header-text h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.header-text p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #909399;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.stat-card {
  cursor: pointer;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.board-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.board-column {
  background: #f5f7fa;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.column-header {
  padding: 16px;
  border-radius: 8px 8px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.column-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: #303133;
}

.column-badge {
  margin-left: 8px;
}

.column-content {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  min-height: 200px;
}

.column-content::-webkit-scrollbar {
  width: 6px;
}

.column-content::-webkit-scrollbar-thumb {
  background: #dcdfe6;
  border-radius: 3px;
}

.column-content::-webkit-scrollbar-thumb:hover {
  background: #c0c4cc;
}

.board-card {
  background: white;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  cursor: move;
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  border-left: 3px solid transparent;
}

.board-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.board-card.in-progress {
  border-left-color: #E6A23C;
}

.board-card.review {
  border-left-color: #409EFF;
}

.board-card.completed {
  border-left-color: #67C23A;
  opacity: 0.8;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.card-title {
  flex: 1;
  font-weight: 500;
  font-size: 14px;
  color: #303133;
  line-height: 1.5;
}

.card-description {
  font-size: 13px;
  color: #606266;
  margin-bottom: 8px;
  line-height: 1.4;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.card-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #909399;
}

.due-date,
.completed-date {
  display: flex;
  align-items: center;
  gap: 4px;
}

.due-date.overdue {
  color: #F56C6C;
}

.card-enter-active,
.card-leave-active {
  transition: all 0.3s ease;
}

.card-enter-from {
  opacity: 0;
  transform: translateY(-10px);
}

.card-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

.card-move {
  transition: transform 0.3s ease;
}

@media (max-width: 1400px) {
  .board-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .board-wrapper {
    grid-template-columns: 1fr;
  }
  
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>

